<div class="row pa-4" style="padding-left: 16px;">
    <h1 class="j-text">使用 jQuery </h1>
    <div class="aaaa">
        <div class="btn btn-primary" id="jq-click">点击按钮</div>
    </div>
    <div id="app">
        <h4>使用 vue</h4>
        <div class="btn btn-primary" @click="show">@{{ btnText }}</div>
        <div v-for="item in list">
            @{{ item.title }} --- @{{ item.desc }}
        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
    $(function() {
        $('#jq-click').click(function () {
            $('h1.j-text').text('执行了 jQuery 方法')
        })
    })
    var app = new Vue({
        el: '#app',
        data: {
            list: [],
            initList: [
                {
                    title: '第一个标题',
                    desc: '第一个描述',
                },
                {
                    title: '第二个标题',
                    desc: '第二个描述',
                },
                {
                    title: '第三个标题',
                    desc: '第三个描述',
                },
                {
                    title: '第四个标题',
                    desc: '第四个描述',
                },
            ],
            btnText: '渲染列表'
        },
        methods: {
            show() {
                if (this.list.length > 0) {
                    this.list = []
                    this.btnText = '渲染列表'
                } else {
                    this.list = this.initList
                    this.btnText = '不显示列表'
                }

            }
        }
    })
</script>
